<template>
	<view class="uni-section">
		<view class="uni-section-header" @click="onClick">
			<view
				class="uni-section-header__decoration"
				v-if="type"
				:class="type"
			/>
			<slot v-else name="decoration"></slot>

			<view class="uni-section-header__content">
				<text
					:style="{ 'font-size': titleFontSize, color: titleColor }"
					class="uni-section__content-title"
					:class="{ distraction: !subTitle }"
					>{{ title }}</text
				>
				<text
					v-if="subTitle"
					:style="{
						'font-size': subTitleFontSize,
						color: subTitleColor,
					}"
					class="uni-section-header__content-sub"
					>{{ subTitle }}</text
				>
			</view>

			<view class="uni-section-header__slot-right">
				<slot name="right"></slot>
			</view>
		</view>

		<view class="uni-section-content" :style="{ padding: _padding }">
			<slot />
		</view>
	</view>
</template>

<script>
/**
 * Section 标题栏
 * @description 标题栏
 * @property {String} type = [line|circle|square] 标题装饰类型
 * 	@value line 竖线
 * 	@value circle 圆形
 * 	@value square 正方形
 * @property {String} title 主标题
 * @property {String} titleFontSize 主标题字体大小
 * @property {String} titleColor 主标题字体颜色
 * @property {String} subTitle 副标题
 * @property {String} subTitleFontSize 副标题字体大小
 * @property {String} subTitleColor 副标题字体颜色
 * @property {String} padding 默认插槽 padding
 */

export default {
	name: 'UniSection',
	emits: ['click'],
	props: {
		type: {
			type: String,
			default: '',
		},
		title: {
			type: String,
			required: true,
			default: '',
		},
		titleFontSize: {
			type: String,
			default: '14px',
		},
		titleColor: {
			type: String,
			default: '#333',
		},
		subTitle: {
			type: String,
			default: '',
		},
		subTitleFontSize: {
			type: String,
			default: '12px',
		},
		subTitleColor: {
			type: String,
			default: '#999',
		},
		padding: {
			type: [Boolean, String],
			default: false,
		},
	},
	computed: {
		_padding() {
			if (typeof this.padding === 'string') {
				return this.padding
			}

			return this.padding ? '10px' : ''
		},
	},
	watch: {
		title(newVal) {
			if (uni.report && newVal !== '') {
				uni.report('title', newVal)
			}
		},
	},
	methods: {
		onClick() {
			this.$emit('click')
		},
	},
}
</script>
<style lang="scss">
$uni-primary: #2979ff !default;

.uni-section {
	background-color: #fff;
	.uni-section-header {
		position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		padding: 12px 10px;
		font-weight: normal;

		&__decoration {
			margin-right: 6px;
			background-color: $uni-primary;
			&.line {
				width: 4px;
				height: 12px;
				border-radius: 10px;
			}

			&.circle {
				width: 8px;
				height: 8px;
				border-top-right-radius: 50px;
				border-top-left-radius: 50px;
				border-bottom-left-radius: 50px;
				border-bottom-right-radius: 50px;
			}

			&.square {
				width: 8px;
				height: 8px;
			}
		}

		&__content {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
			flex: 1;
			color: #333;

			.distraction {
				flex-direction: row;
				align-items: center;
			}
			&-sub {
				margin-top: 2px;
			}
		}

		&__slot-right {
			font-size: 14px;
		}
	}

	.uni-section-content {
		font-size: 14px;
	}
}
</style>
